/*Basics that affect every page*/
:root{
    --html-background-color: black;
    --body-background-color: rgba(95, 48, 86, 0.9);
    --main-background-color: rgb(230, 173, 222);  
    --nav-color: rgb(231, 188, 222);
    --main-color: rgb(50, 1, 38);
    --main-text-color: rgb(250, 209, 242);
    --main-calculator-color: rgb(100, 47, 89);
    --hover-color: rgb(255, 0, 221);
    --table-background-color: rgb(230, 173, 221);
    --table-background-color2: rgb(229, 140, 213);

}
html{
    background-color: var(--html-background-color);
    background-image: url("../images/background.jpg");
}
body{
    width: 80vw;
    background-color: var(--body-background-color);
    padding: 1%;
    margin: auto;
    border: thin solid var(--main-color);
}
main{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}
section{
    margin-right: 0.5vw;
}
p, h1, h2, h3, h4{
    color: var(--main-text-color);
}
section p{
    background-color: rgb(33, 10, 53);
    border: thin rgb(253, 201, 243) solid;

}
h1{
    background-color:rgb(76, 24, 124);
}
h2{
    background-color:rgb(94, 30, 153);
}
h3{
    background-color:rgb(122, 39, 200);
}
h4{
    background-color:blueviolet;
}


/* Nav styling */
nav{
    display: grid;
    grid-template-columns: auto auto auto;
    border: thin black solid;
    background-color:rgb(28, 28, 56);
}
nav a, nav a:visited{
    color: var(--nav-color);
}
p a {
    color: var(--nav-color);
}
p a:visited{
    color: var(--nav-color);

}


/* Footer styling */
footer, footer a:visited{
    display: grid;
    grid-template-columns: auto auto auto;
    color: var(--nav-color);
    border: thin black solid;
    background-color:rgb(28, 28, 56);
}


/* Form calculator styling */
main#detail{
    gap:auto;
    grid-template-columns: 50% 50%;
}
label{
    color:rgb(60, 12, 51);

}
fieldset{
    background-color: var(--main-text-color);
}
p.mistake{
color: red;
}
ol{
    background-color: white;
    border: thin black solid;   
}
input[type=submit]{
    border-radius: 5%;
    border: 1pt solid darkblue;
    background-color: lightblue;
    width: auto;
}

/* Detail2 page CSS */
main#detail2Grid{
    grid-template-columns: auto;
}
#detail2{
    color: whitesmoke;
    font-size: 20pt;
}