body {
    background-image: url("img/spacebggeo2.gif");
	background-position: top;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 220px;
    margin: auto;
    box-sizing: border-box; 
    background-image: url("img/bg.jpg");
    background-size: cover;

    border-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-width: 12px;
    border-bottom: none;
    border-bottom-width: 0px;
    border-style:solid;
    border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
}

.cringe {
    display: block;
    width: auto;
}

nav {
    display: flex;
    justify-content: center;
}

nav ul {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: 60%;
    height: 50px;
    list-style-type: none;
    margin: 0;
    background-color: rgb(15, 141, 141);

    border-width: 12px;
    border-bottom: none;
    border-top: none;
    border-bottom-width: 0px;
    border-top-width: 0px;
    border-style:solid;
    border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
}

nav ul li {
    padding: 0px 10px 0px 10px;
    color:rgb(255, 255, 255)
}

nav ul li:hover {
    border-radius: 100%;;
    background-color: rgb(33, 187, 174);
}

.container {
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box; 
    width: 60%;
    height: 750px;
    padding-top: 10px;
    margin: auto;
    background-color: rgb(119, 16, 42);
    justify-content: center;    
    
    border-radius: 20px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-width: 12px;
    border-top: none;
    border-top-width: 0px;
    border-style:solid;
    border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
}

.container div {
    background-color: rgb(252, 223, 233);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;;
}

.left-box {
    flex: 3 0 200px;
}

.icon {
    display: block;
    box-sizing: border-box;
    width: 220px;
    height: 220px;
    margin: auto;
    margin-top: 15px;
    border-radius: 20px;
}

.icon:hover {
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    0% {transform: rotate(360deg)};
}

.middle-box {
    flex: 6 0 400px;
    text-align: center;
}

.right-box {
    flex: 0 0 200px;
}