/*The css part is for animations, elements,hyperlinks, interactions etc*/
/*This is typed more like java than HTML in index*/

:root{
--green:#00FF00;
--white: #FFFFFF;
--black: #000000;
}
body {
    font-family: monospace;
    background: var(--bg);
    color: var(--fontColor);

    /*addin styles for the box*/
    min-height:100vh;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}


ul { /*applies these rules to the <ul> html part (ie: the font)*/
font-family: helvetica;
}

li { 
    list-style: circle;
}

.list{ /*classs selector. anything with attribute list gets style i put in here*/
    list-style: square;
}

#msg { /*ID selector, anything with id set to msg gets style i put in here*/
    font-family: monospace;
}

.box{
    width: 400px;
    padding:80px;

    border: 3px solid var(--fontColor);
    background-color: var(--bg);

    text-align: center;

    /*moving it to the right and up so the drawing goes on the left and down*/
    margin-left: 500px;
    margin-bottom: 400px;
}

.btn { /* For the new button we made in case we want to add rules to all buttons*/
  position: absolute; /* position relative to the nearest positioned parent*/
  top: 20px; /*20 pixels from the top of its parent*/
  left: 250px; /*250 pixels away from the left of its parent*/
  height: 50px;/*height of 50 pixels*/
  width: 50px;/*width of 50 pixels*/
  border-radius: 50%; /* same height and width make it perfectly circular*/
  border: none;
    color: var(--btnFontColor);
    background-color: var(--btnBg);

}

/* Define what light and dark mode are so the button can switch between modes*/

.light-theme {
  --bg: var(--white);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--white);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

.corner-art{
    position: fixed;

    right:0px;
    bottom:0px;

    width:400px;
}

.logo-art{
    position: fixed;
    top:0px;
    left:0px;

    width:200px;
}