@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600&display=swap');
body, html { height: 100%;}
body {background-color: #000;color: rgba(255,255,255,0.7);font-family: 'Baloo 2', cursive;background: url("images/glowing-gold-curved.webp") no-repeat center;background-size: cover;}
p:last-child { margin-bottom: 0}
.container.narrow { max-width: 768px;}
.contentwrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; padding: 50px 0;}
.slogan {font-size: 20px;color: #fff;}
.icon-flag { max-width: 60px; transition: .3s;}
.country-opt { text-align: center; width: 80px}
.country-opt a, .country-opt a p { text-decoration: none; color: rgba(255,255,255,0.7);}
.country-opt a:hover p {color: rgba(255,255,255,1);}
.country-opt a:hover > img { transform: scale(1.1); transition: .3s;}
.logo svg { width: 200px;}
@media (max-width: 768px) {
    body {background-size: auto;}
}

/*----- white-line -----*/
svg .svg-elem-1 {stroke-dashoffset: 1614.444091796875px;stroke-dasharray: 1614.444091796875px;fill: transparent;-webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5s;transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5s}
svg.active .svg-elem-1 {stroke-dashoffset: 0;fill: rgb(100, 194, 149)}
svg .svg-elem-2 {stroke-dashoffset: 237.83895874023438px;stroke-dasharray: 237.83895874023438px;fill: transparent;-webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.1s;transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.1s}
svg.active .svg-elem-2 {stroke-dashoffset: 0;fill: rgb(255, 255, 255)}
svg .svg-elem-3 {stroke-dashoffset: 193.157958984375px;stroke-dasharray: 193.157958984375px;fill: transparent;-webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s;transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s}
svg.active .svg-elem-3 {stroke-dashoffset: 0;fill: rgb(255, 255, 255)}
svg .svg-elem-4 {stroke-dashoffset: 37.719505310058594px;stroke-dasharray: 37.719505310058594px;fill: transparent;-webkit-transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.3s;transition: stroke-dashoffset 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 5.3s}
svg.active .svg-elem-4 {stroke-dashoffset: 0;fill: rgb(255, 255, 255)}