/*no horizonta scroll on mobile*/
body, html{
    overflow-x: hidden;
}

body{

    background-color: #FFDFD3;
}

/*text*/
h1 {
    display:flex;
    justify-content:center;
    font-family:monospace;
    color:darkslategrey;
}

p {
    display:flex;
    justify-content:center;
    font-family:monospace;
    color:darkslategrey;
}

.myfont {
    font-family:monospace;
}

.center{
    text-align: center; 
    justify-content: center;
}

.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
/*buttons*/
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
 
.color {
        transform: rotate(90deg);
        animation-name: rotatescreen;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        transition-timing-function: linear;
        }
/*allignment*/

.centered{
    text-align: center;
    display: flex;
    justify-content: center;
}

 }
    
    .rotate {
        transform: rotate(90deg);
        animation-name: rotatescreen;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        transition-timing-function: linear;
    }
  
  
 }
    
    @keyframes rotatescreen {
        from {transform: rotate(0);}
        to {transform: rotate(360090deg);}
    }
    
.parallax {
  /* The image used */
  background-image: url("https://codehs.com/uploads/8b74c57411e0ece6c064b128673b7721");

  /* Set a specific height */
  min-height: 700px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 980px) {    
    
 /* resets the button styling */
    
button {
    all: unset;
    cursor: pointer;
}

table{/* This is for the table in the chatroom */
    border: 1px solid black;
    width:80%;
    margin:auto;
}

th:first-child {  /* This is for the first header in the table */
    width:10%;
    background-color: #eeeeee;
}
  
th:nth-child(2) { /* This is for the second header in the table */
    width:90%;
    text-align: left;
    padding-left: 3%;
}

td:first-child {  /* This is for the first column in the table */
    width:10%;
    background-color: #eeeeee;
    text-align: left;
    padding-left:20px;
}
  
td:nth-child(2) {  /* This is for the second column in the table */
    width:90%;
    text-align: left;
    padding-left: 3%;
}

.chatroomText{  /* This is for the Welcome and the textbox to enter a msg*/
    width:80%;
    margin:auto;
    text-align: left;
}