/* Global styles */


* {
    font-family: 'Anek Devanagari', sans-serif, 'Lucida Fax', Courier, monospace;
    font-family: 'Josefin Sans', sans-serif, 'Lucida Fax', Courier, monospace;
    font-family: 'Passion One', cursive, 'Lucida Fax', Courier, monospace;
}

body {
    background-color: #181A18;
    background-repeat: no-repeat;
    background-size: cover;
    animation: opacity 1.5s;
}

@keyframes opacity {
    from {
        opacity: 0%}
        to {
        opacity: 100%}
}

#homefooter {
    position: static;
    margin-top: 10%;
    background-color: black;
    height: 100px;
    bottom:0%;
    background-repeat: no-repeat;
    border-top: solid gold 3px;
}

#footerlinks {
    position: absolute;
    float: right;
    margin-left: 80%;
    margin-bottom: 3%;
    display: inline;
    margin-top: 2%;
    padding-right: 3%;
}

footer a {
    text-decoration: none;
    color: gold;
    padding-right: 10px;
}

footer a:hover {
    color: black;
    -webkit-text-stroke: gold 0.1px;
    -webkit-transition: ease-in-out .5s;
    transition: ease-in-out .5s;
}

header a {
    text-decoration: none;
    color: gold;
    padding-right: 5%;
}

header a:hover {
    color: white;
    -webkit-transition: ease-in-out .5s;
    transition: ease-in-out .5s;
    -webkit-text-stroke: .75px black;
}

footer a:hover {
    color: white;
    text-decoration: underline;
}

footer div {
    display: block;
}

#trademark {
    color: orange;
    margin-bottom: 2%;
    position: absolute;
    margin-left: 48%;
    margin-top: 2%;
}

#homelogo {
    width: 400px;
    height: 200px;
    display: flex;
    align-self: center;
    align-items: center;
    --stroke-pos: 1px;
    --stroke-neg: -1px;
    --stroke-color: rgba(0, 0, 0, 0.2);
    filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) 
    drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
    drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
    drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
    drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) 
    drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
    drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
    drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color)); 
}
 /* Deactivate for now, think about it later.
#homelogo:hover {
  transform: rotate(180deg);
    -webkit-transition-duration: 3s;
    transition-duration: 3s;
    transition-timing-function: ease-in-out 3s;
} */


 header h1 {
     display: inline;
     top: 0;
     font-family: Arial;
     background-color: transparent;
 }

 header {
     height: 200px;
     width: 100%;
     position: sticky;
     background-repeat: no-repeat;
     top: 0%;
     margin-top: 0%;
     transition: 0.3s;
     transition-delay: 0.1s;
     border-bottom: none;
     background: transparent;
     z-index: 1;
     display: flex;
     flex-direction: row;
     justify-content: left;
     flex-wrap: nowrap;
     vertical-align: middle;
 }


#navbar {
    position: static;
    display: flex;
    width: 55%;
    margin-left: -2.5%;
    font-size: x-large;
    vertical-align: middle;
    line-height: 400%;
    align-self: center;
}

#socialmedia {
    float: left;
    margin-top: 1%;
    margin-left: 4%;
    position: absolute;
}

.social_img {
    width: 50px;
    height: 50px;
    filter: grayscale(80%);
    -webkit-filter: grayscale(100%);
}

.social_img:hover {
    background-repeat: no-repeat;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}

front_first {
    position: fixed;
    display: inline-block;
}

p {
    font-size: 150%;
}

header .current {
    color: white;
}

footer .current {
    color: white;
}

#ad_golden_logo {
    display: none;
}

#mobilemenu {
    display: none;
    animation: opacity 2s;
    animation: slideIn .5s;
    border: 3px black solid;
    transition: all 0.5s ease-in-out;
}

@keyframes opacity {
       from {opacity: 0.1}
       to {opacity: 1}
    }

@keyframes slideIn {
    from {margin-left: 500%}
    to {margin-left: 0%;}
}

@keyframes slideOut {
    from {margin-left: 0%}
    to {margin-left: 500%;}
}

#togglebutton {
    display: none;
    color: white !important;
}

#homename {
    width: 20%;
    display: block;
    margin-left: -6%;
}

#langs {
    display: flex;
    flex-direction: row;
    gap: 2.5%;
    justify-content: space-evenly;
    font-size: medium;
    margin-right: 10%;
    flex-wrap: nowrap;
    font-size: medium;
}

#langs label {
    white-space: nowrap;
    line-height: 175%;
    font-weight: bold;
    font-size: medium;
    color: white;
}

#langs a {
    display: inline-block;
    position: relative;
    color: gold;
    padding: 3%;
    margin-top: 3%;
    text-decoration: none;
    font-weight: bold;
}

#langs a:hover {
    color: black;
    cursor: pointer;
}

#mobilelang {
    display: flex;
    background: transparent;
    text-align: center;
    margin-left: 20vw;
    justify-content: right;
    border: none;
    -webkit-appearance: none;
    color: white;
    font-size: 200%;
    -webkit-text-stroke: black .5px;
}
#mobilelang option {
    background: white;
    text-align: center;
    justify-content: center;
    color: black;
}


/* Mobile design */

@media screen and (min-width: 200px) and (max-width: 820px) {
    body {
        background: #181A18;;
        -webkit-background-size: 100%; 
        -moz-background-size: 100%; 
        -o-background-size: 100%; 
        background-size: 100%; 
        -webkit-background-size: cover; 
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover;
    }
    header {
        height: 10%;
        position: static;
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }    

    #navbar {
        display: none;
    }
    #homelogo {
        margin-left: 10%;
        height: 100px;
        width: 200px;
        position: static;
        vertical-align: middle;
        align-self: center;
        margin-top: 10%;
    }
    #togglebutton {
        display: flex !important;
        color: white;
        font-size: 600%;
        position: static;
        align-self: center;
        align-items: center;
    }
    .headerlink {
        text-align: center;
        justify-content: center;
        align-self: center;
        -webkit-text-stroke: black 1px;
        font-size: 50%;
    }
    #homefooter {
        position: static;
        background-color: black;
        margin-top: 100%;
        height: 500px;
        bottom:0%;
        background-repeat: no-repeat;
        border-top: solid gold 3px;
        display: block;
        }
    #trademark {
        display: none;
    }
    footer img {
        margin-top: 10%;
        position: static;
    }
    #socialmedia {
        margin-left: 25%;
    }
    #navsocialmedia {
        margin-top: 15%;
    }
    #footerlinks {
        display: flex;
        justify-content: center;
        margin-top: 100%;
        margin-left: 30%;
    }
    #ad_golden_logo {
        height: 200px;
        width: 200px;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    #mobilefooterlogo {
        display: flex;
        justify-content: center;
        margin-top: 25%;
    }
    hr {
        height: 2px;
        background-color: black;
    }
    #mobilemenu {
        display: none;
        margin-top: 0%;
    }
    #mobilemenutop {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    #cancelmenu {
        font-size: 125%;
        position: static;
        margin-top:17% !important;
        cursor: pointer;
    }
    #mobilemenuimage {
        height: 30%;
        width: 30%;
        margin-top: 10%;
        justify-content: center;
        --stroke-pos: 1px;
        --stroke-neg: -1px;
        --stroke-color: rgba(0, 0, 0, 0.2);
        filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) 
        drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
        drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
        drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
        drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) 
        drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
        drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
        drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color)); 
    }
    .mobilehr {
        border: 2px solid rgb(255, 217, 0);
        height: 2px;
        width: 50%;
    }
    .mobilemenuClicked {
        display: block !important;
        position: fixed;
        text-align: center;
        margin-top: 30%;
        background-color: rgba(255, 255, 255, 0.7);
        font-size: 200%;
        opacity: 1;
        width: 100%;
        min-height: 100vh;
        top: 0%;
        bottom: 0%;
        z-index: 1;
    }
    #homename {
        display: none;
    }
    #langs {
        display: none;
    }
    #mobilelang {
        display: flex;
        background: transparent;
        text-align: center;
        border: none;
        -webkit-appearance: none;
        color: white;
        margin-left: 4vw;
    }
    #mobilelang option {
        background: transparent;
        text-align: center;
        justify-content: center;
        color: black;
    }
    footer .current {
        color: white;
    }
    .social_img {
        width: 50px;
        height: 50px;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
    }
    
    .social_img:hover {
        background-repeat: no-repeat;
    }
    #mobilenavbar {
        margin-top: -7%;
    }
    }