@charset "utf-8";
/* CSS Document */

header{ padding: 100px 25px; display: flex; justify-content: center; align-items: center; gap: 50px;flex-wrap: wrap; }

.header_text{width: 850px; }
.circle{ height: 600px; width: 600px;max-height: 80vw; max-width: 80vw; overflow: hidden; border-radius: 50%; border: 20px solid #800080; display: flex; justify-content: center; align-items: center; }

.circle img{width: 105%;}

nav{ margin-bottom: 120px; }
nav ul{ display: flex; list-style: none; gap: 20px; }
nav a{ color: #800080; text-decoration: none; position: relative;padding: 3px;}
nav a:hover{color: white;}
nav a::after{content:"" ; height: 2px; width: 0; background: #800080;position:absolute; bottom: 0; left: 0;transition: 150ms ease-in-out;}
nav a:hover::after{width: 100%;}

#toggle_button{display: none;}
label[for="toggle_button"]{display: none;}
label[for="toggle_button"] span{font-size: 40px;}

@media(max-width: 800px){
nav{position: absolute;top: 0; left: 0;background: #000000;padding: 15px; border-radius: 0 0 25px 0;}
nav ul{display:none;flex-direction: column;}

#toggle_button:checked ~ ul{display: flex;}
label[for="toggle_button"]{display: block;}
}