/* Variables */
:root {
    /* color */
    --text: #f6ecdc;
    --accent1: #ffb22e;
    --accent1-dark: #7a450c;
    --bg: #5bac55;
    --bg-dark: #255721;
}


/* global */
body{
  font-family: "Cabin Sketch", sans-serif;
  font: 400;
  color: var(--text);
  background-color: var(--bg);
}


.site-header{
    font-weight: bold;
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 10rem;
    margin-right: 2rem;
    margin-left: 2rem;


}


.title {
font-size: 2rem;

 @media screen and (min-width: 850px) {
	font-size: 3rem;
	}
}

.container {
  position: relative;
  text-align: center;
  color: var(--text);
}

.site-nav__link {
    
    display: grid;
    gap: .5rem;
    justify-content: center;
   

    li {
    margin-bottom: 1rem;

    @media screen and (min-width: 850px) {
	margin-bottom: 1.5rem;
	}

    }

    a {
        font-size: 1.5rem;
		text-decoration-line: underline;
		display: inline-block;
		border: var(--text) 1px solid;
		border-radius: .5rem;
        padding: .5rem 3rem;
		text-align: center;

    @media screen and (min-width: 850px) {
	font-size: 2rem;
	}

    }

    a:hover {
        background-color: var(--bg-dark);
    }
   
}



.button{
    transform: scale(.6);
    margin-left: 1rem;
    margin-top: 2rem;

    @media screen and (min-width: 850px){
    transform: scale(1);
    margin-left: 2rem;
    margin-top: 5rem;
    padding: 0rem;
    }
}


.time_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;

  @media screen and (min-width: 850px) {
	font-size: 3rem;
	}

}


.water {
    font-family: "Cherry Bomb One", system-ui;
	font-size: 2rem;
	text-decoration: none;
    margin-bottom: 10rem;
     text-align: center;

     
}

.button_water {
   	border: var(--text) 1px solid;
	border-radius: 1rem;
	padding: 1rem 2rem;
}

.button_water:hover{
    background-color: rgb(103, 176, 255);
}

.water:hover {
    animation: water 2s ease;
}

@keyframes water {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-8deg); }
  30%  { transform: rotate(8deg); }
  45%  { transform: rotate(-6deg); }
  60%  { transform: rotate(6deg); }
  75%  { transform: rotate(-3deg); }
  90%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}



.egg {
    font-family: "Matemasie", sans-serif;
	font-size: 2rem;
	text-decoration: none;
	font-weight: bold;
    margin-bottom: 10rem;
     text-align: center;
}

.button_egg {
   	border: var(--text) 1px solid;
	border-radius: 3.5rem;
	padding: 4rem 1rem;
}

.egg:hover{
    transform: rotate(360deg);
    transition:2s; 
}

.button_egg:hover {
    background-color: white;
    color: var(--accent1-dark);
}


.talk {
    font-family: "Sour Gummy", sans-serif;
	font-size: 2rem;
    font-weight: 900;
	text-decoration: none;
    margin-bottom: 10rem;
    text-align: center;
}

.button_talk {
   	border: var(--text) 1px solid;
	border-radius: 1rem;
	padding: 1rem 2rem;
}

.talk:hover {
    transform: scaleX(2); 
    transition: 1s;
}


.mine {
    font-family: "Rubik Microbe", system-ui;
	font-size: 2rem;
	text-decoration: none;
    margin-bottom: 10rem;
     text-align: center;
}

.button_mine {
   	border: var(--text) 1px solid;
	border-radius: 1rem;
	padding: 1rem 2rem;
}

.button_mine:hover {
    transition: all 2s;
    border: var(--accent1) 4px solid;
}

.mine:hover {
    transition: 2s;
    scale: 1.5;
}

.sleep {
    font-family: "Slackside One", cursive;
	font-size: 2.5rem;
	text-decoration: none;
    margin-bottom: 10rem;
     text-align: center;
}

.button_sleep {
   	border: var(--text) 1px solid;
	border-radius: 1rem;
	padding: 1rem 2rem;
}

.sleep:hover {
transform: translate(60rem);
transition: 5s;
}