body{
font-size: 0.99rem;
font-family: higu;
color: rgb(58, 58, 58);
background-image: url(/images/index/bglighter.png);
}

@font-face {
font-family: higu;
src: url(/fonts/sazanami-gothic.ttf);
}

@font-face {
font-family: adelia;
src: url(/fonts/adelia.ttf);
}

iframe{
width: 100%;
height: 100%;
border: 1px solid darkgray;
border-radius: 10px;
}

h2{
padding: 0.5rem;
background: #ffffff;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(232, 242, 250, 1) 50%, rgba(255, 255, 255, 1) 90%);
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
letter-spacing: 5px;
cursor: default;
transition: ease-in-out 0.3s;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px darkgrey dotted;
border-radius-left: 10px;
border-radius-right: 10px;
position: sticky;
top: 0;
}

h2:hover{
color: #549acf;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

b{
color: #549acf;
}

a{
transition: ease-in-out 0.3s;
}

a:hover{
cursor: default;
letter-spacing: 2px;
}

a:visited{
color: blue;
}

.container { display: grid;
grid-template-columns: 0.6fr 1.4fr;
grid-template-rows: 0.1fr 1fr 0.2fr 2fr 1.7fr 1.9fr 0.1fr;
gap: 1rem 1rem;
grid-auto-flow: row;
grid-template-areas:
"topbar topbar"
"header header"
"links links"
"updates main"
"buttons main"
"cliques currently"
"footer footer";
width: 40rem;
height: 55rem;
margin: auto;
margin-top: 2rem;
z-index: 1;
}

marquee{
padding: 0;
margin: 0;
padding: 0.1rem;
margin-top: 0.1rem;
font-style: italic;
font-size: 0.8rem;
}

.topbar {
grid-area: topbar;
background: #ffffff;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(232, 242, 250, 1) 50%, rgba(255, 255, 255, 1) 90%);
border: 1px solid darkgray;
border-radius: 10px;
}

.header {
grid-area: header;
background-image: url(/images/index/head.png);
background-size: cover;
background-position: 0% 92%;
filter: hue-rotate(-10deg);
border: 1px solid darkgray;
border-radius: 10px;
}

.header h1{
right: 0;
top: 1%;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-style: italic;
font-family: adelia;
position:absolute;
font-size: 3rem;
}

.links {
grid-area: links;
border: 1px solid darkgray;
border-radius: 10px;
}

.updates {
grid-area: updates;
background-color: white;
}

.buttons {
grid-area: buttons;
border: 1px solid darkgray;
border-radius: 10px;
background-color: white;
overflow: auto;
}

.buttons h2, .cliques h2, .currently h2, .main h2{
margin-top: 1.5%;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: left;
margin-bottom: 0.5rem;
}

.buttons p, .cliques p{
margin: 0;
padding: 0;
cursor: default;
text-align: center;
}

.buttons img{
display: block;
margin: auto;
}

textarea{
display: block;
margin: auto;
margin-top: 0.2rem;
margin-bottom: 0.5rem;
border: 1px solid darkgray;
border-radius: 10px;
}


textarea:hover{
cursor: default;
}

.cliques {
grid-area: cliques;
border: 1px solid darkgray;
border-radius: 10px;
background-color: white;
overflow: auto;
}

.cliques img{
display: block;
margin: auto;
margin-bottom: 0.2rem;
margin-top: 0.2rem;
}

.cliques p{
margin-bottom: 0.2rem;
margin-top: 0.2rem;
}

.main {
grid-area: main;
border: 1px solid darkgray;
border-radius: 10px;
background-color: white;
padding: 1rem;
overflow: auto;
}

.main2{
border: 1px solid darkgrey;
border-radius: 10px;
}

#mainpic{
float: left;
width: 20%;
height: auto;
margin-top: 3.2rem;
}

.main p{
margin-left: 0.5rem;
margin-right: 0.5rem;
}

hr{
border: 1px dotted darkgrey;
border-bottom: none;
width: 80%;
}

.currently {
grid-area: currently;
border: 1px solid darkgray;
border-radius: 10px;
background-color: white;
overflow: auto;
}

.currently p{
padding: 0.5rem;
background: #E9F2FA;
background: linear-gradient(99deg, rgba(232, 242, 250, 1) 34%, rgba(255, 255, 255, 1) 100%);
border: 1px solid transparent;
border-radius: 20px;
color: rgb(58, 58, 58);
margin-left: 0.6rem;
margin-bottom: 0.1rem;
margin-top: 0.1rem;
font-size: 0.8rem;
}

.currently b{
color: rgb(58, 58, 58);
letter-spacing: 3px;
}

h3:hover{
cursor: default;
}

.footer {
grid-area: footer;
background: #ffffff;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(232, 242, 250, 1) 50%, rgba(255, 255, 255, 1) 90%);
border: 1px solid darkgray;
border-radius: 10px;
}

.links ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #ffffff;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(232, 242, 250, 1) 50%, rgba(255, 255, 255, 1) 90%);
border: 1px solid transparent;
border-radius: 10px;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 1.2rem;
transition: ease-in-out 0.3s;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #ffffffb0;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
transition: ease-in-out 0.3s;
}

.dropdown-content a:hover {
background-color: #E8F2FA;
}

.dropdown:hover .dropdown-content {
display: block;
}

#heart{
float: right;
margin-top: 0.2rem;
width: 5%;
height: auto;
filter: hue-rotate(10deg) contrast(100%) brightness(1.5);
}

#flowa{
position: absolute;
bottom: 0;
right: 0;
width: 15%;
height: auto;
z-index: -1;
}

#wires{
position: absolute;
bottom: 0;
left: 0;
width: 35%;
height: auto;
z-index: -1;
}

@media only screen and (max-width: 640px) {
.container { display: grid;
grid-template-columns: 0.6fr 1.4fr;
grid-template-rows: 0.1fr 1fr 0.2fr 2fr 1.7fr 1.9fr 0.1fr;
gap: 1rem 1rem;
grid-auto-flow: row;
grid-template-areas:
"topbar topbar"
"header header"
"links links"
"main main"
"updates updates"
"currently currently"
"footer footer";
width: 100%;
height: 55rem;
margin: auto;
margin-top: 2rem;
z-index: 1;
}

.header h1, .buttons, .cliques,.main h2{
display: none;
}

.dropbtn{
font-size: 0.9rem;
}

a:hover{
letter-spacing: 0;
}
}